<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    >
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="{{ url('static', filename='images/favicon.ico') }}">
    <title>Imagetagger - keras deployment demo</title>
    <link
        rel="stylesheet"
        href="{{ url('static', filename='styles/main.css') }}"
    >
</head>
<body>
    <header class="header">
        <a href="https://github.com/Arfey/create-aio-app" class="fork-me-on-github">
            <img
                src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"
                alt="Fork me on GitHub"
            >
        </a>
        <div class="banner">
            <img
                class="banner-logo"
                src="{{ url('static', filename='images/logo.png') }}"
                alt="logo"
            >
            <h1 class="banner-title">Imagetagger</h1>
            <p>
                Keras model deployed with aiohttp
            </p>
        </div>
    </header>
    <div class="wrapper">
        <h1 class="subtitle">
            Imagetagger - keras model deployment demo
        </h1>
        <main>
            <button  class="btn btn-success" onclick="HandleBrowseClick('input-image-hidden');" >Upload image</button>
            <input style="display: none;" id="input-image-hidden" onchange="handleOnChange('input-image-hidden')" type="file" accept="image/jpeg, image/png">
            <br>
            <div class="image-block">
                <div class="image-wrapper">
                    <img
                            id="image-preview"
                            src="https://crowdsourcer.io/assets/images/no-img.png"
                    >
                </div>
                <div class="predict-info">
                    <p>
                        <b>Info:</b>
                        <div id="data-wrapper"></div>
                    </p>
                </div>
            </div>

            <script type="text/javascript">
                function responseToHtml(data) {
                  let outStr = '';

                  for (let i = 1; i < data['predictions'].length + 1; i++) {
                    let item = data['predictions'][i - 1];
                    const probability = item['probability'].toFixed(3);
                    const label = item['label'];

                    outStr += (
                      "<p>" + i + "." +
                      "<i>label:</i> " + label + "<br/>" +
                      "<i>probability:</i> " + probability + "</p>"
                    )
                  }

                  return outStr
                }
                function HandleBrowseClick(input_image) {
                    var fileinput = document.getElementById(input_image);
                    fileinput.click();
                };

                const upload = (file) => {
                  const data = new FormData();
                  const $datWrappaer = document.getElementById('data-wrapper');

                  data.append('file', file);

                  fetch('{{ url("predict") }}', {
                    method: 'POST',
                    body: data,
                  }).then(
                    response => response.json()
                  ).then(
                    data => $datWrappaer.innerHTML = responseToHtml(data)
                  )
                };

                function handleOnChange(input_image) {
                    var input = document.getElementById(input_image);
                    document.getElementById('image-preview').src = (
                      window.URL.createObjectURL(input.files[0])
                    );

                    upload(input.files[0]);
                };
            </script>
        </main>
    </div>
</body>
</html>
